<template>
	<gui-page ref="guiPage" :customHeader="true">
		<!-- 导航 -->
		<template v-slot:gHeader>
			<nav-bar-custom left-icon="left" :leftType="'0'" :title="$t('locationBarcodeInfo.ngDetail')"
				@clickLeftBack="clickLeftBack"></nav-bar-custom>
		</template>

		<template v-slot:gBody>
			<view class="barcodeSplitting">
				<!-- 扫描条码部分 -->
				<view class="gui-bg-white gui-dark-bg-level-3 gui-padding-x distributed-head">
					<!-- 时间区间 -->
					<view class="gui-form-item gui-border-b">
						<text class="gui-form-label gui-secondary-text">{{ $t('distributedEnter.date') }}：</text>
						<view class="gui-form-body gui-text-right" @click="dateChoose">
							<view class="gui-form-input gui-text-right" v-if="data.chooseTime.length">
								<text>{{ data.chooseTime[0] }}</text> {{ data.chooseTime[1] ? '-' : '' }}
								<text>{{ data.chooseTime[1] }}</text>
							</view>
							<input v-else type="button" class="gui-form-input gui-text-right"
								:placeholder="$t('distributedEnter.placeholderTextChoose')" />
						</view>
					</view>
					<view class="gui-form-item gui-border-b">
						<text class="gui-form-label gui-secondary-text" style="margin-right:40rpx">
							{{ $t('translationImage.process') }}：
						</text>
						<view class="gui-form-body gui-text-right" style="overflow:visible;">
							<superweiCombox style="text-align:right;" :candidates="data.processOption"
								:placeholder="$t('distributedOut.placeholder')" :isJSON="true" keyName="name"
								@select="select" v-model="data.process" :defaultValue="''">
							</superweiCombox>
						</view>
					</view>
					<!-- 产线 -->
					<view class="gui-form-item gui-border-b">
						<text class="gui-form-label gui-secondary-text">
							{{ $t('multilingual.productionLine') }}：
						</text>
						<view class="gui-form-body gui-text-right" style="overflow:visible;">
							<comboGrid requestUrl="/wms/mesProductionline/getNGPageSet" v-model="data.productionLine"
								:requestParam="data.requestParam" inputKey="productionLineCode"
								:placeholder="$t('distributedEnter.placeholderTextChoose')"
								:gridPlaceholder="$t('Common.enterCodeOrName')" :column="data.columnLine.column"
								bindValue="productionLineCode" @setClick="getProcessCode">
							</comboGrid>
						</view>
					</view>
					<view class="gui-form-item gui-border-b" style="padding:10rpx 0;">
						<text class="gui-form-label gui-secondary-text" style="width:200rpx">
							{{ $t('distributedEnter.barcodeScan') }}：
						</text>
						<uni-easyinput class="uni-mt-5" suffixIcon="scan" v-model="data.barCode" type="search"
							:placeholder="$t('Common.scanningBarCode')" @confirm="confirm" @iconClick="iconClick">
						</uni-easyinput>
					</view>
					<view class="gui-form-item gui-border-b gui-flex gui-justify-content-center">
						<view class="gui-flex gui-space-between gui-align-items-center"
							style="width: 70%;height: 100rpx;">
							<button type="default" class="gui-button gui-button-mini gui-bg-black4 gui-noborder"
								style="width:200rpx;" @click="reset(OPERATION_REASCT)">
								<text class="gui-block gui-color-black gui-button-text-mini gui-icons">{{
		$t('distributedEnter.reset')
	}}</text>
							</button>
							<button type="default" class="gui-button gui-button-mini gui-bg-blue gui-noborder"
								style="width:200rpx;" @click="search">
								<text class="gui-block gui-color-white gui-button-text-mini gui-icons">{{
		$t('distributedEnter.search')
	}}</text>
							</button>
						</view>
					</view>
				</view>

				<!-- 提示信息 -->
				<view class="gui-flex gui-rows gui-nowrap gui-align-items-center gui-margin-top">
					<view class="gui-title-line"></view>
					<text class="gui-primary-text gui-h6" style="padding-left:50rpx; padding-right:50rpx;">{{
			$t('locationBarcodeInfo.ngInformation') }}</text>
					<view class="gui-title-line"></view>
				</view>

				<!-- 条码展示部分 -->
				<scroll-view :show-scrollbar="false" :scroll-y="true" class="scroll">
					<view style="height: 15rpx"></view>
					<view class="card-boxCustom" v-for="(item, index) in  data.list" :key="index">
						<view class="card-body">
							<view class="custom-card-itemOne">
								<text class="body-item-title">{{ $t('distributedEnter.materialCode')
									}}：</text>{{ item.material_code }}
							</view>
							<view class="custom-card-itemOne">
								<text class="item-info-title">{{ $t('locationBarcodeInfo.positions')
									}}：</text>{{ item.location }}
							</view>
							<view class="custom-card-itemOne">
								<text class="body-item-title">{{ $t('locationBarcodeInfo.palletNumber')
									}}：</text>{{ item.carton_no }}
							</view>
							<view class="custom-card-itemOne">
								<text class="body-item-title">{{ $t('distributedEnter.qty')
									}}：</text>{{ item.qty }}
							</view>
							<view class="custom-card-itemOne">
								<text class="body-item-title">{{ $t('multilingual.state')
									}}：</text>{{ item.status }}
							</view>
							<view class="custom-card-itemOne">
								<text class="body-item-title">{{ $t('translationImage.productionTime')
									}}：</text>{{ item.output_time }}
							</view>
							<view class="custom-card-itemOne">
								<text class="body-item-title">{{ $t('materials.jobNumber')
									}}：</text>{{ item.operator_code }}
							</view>
							<view class="custom-card-itemOne">
								<text class="body-item-title">{{ $t('slottedAsh.operator')
									}}：</text>{{ item.operator_name }}
							</view>
						</view>
					</view>
					<view v-if="data.noticeHooks" class="noticeHooks">
						{{ data.list.length == 0 ? $t('stockManage.notAvailable') : $t('stockManage.without') }}
					</view>
				</scroll-view>
			</view>
			<calendarCustom ref="calendarCustomRef" @setTime="getTime" :selectTime="data.chooseTime"></calendarCustom>
		</template>
	</gui-page>
</template>

<script setup>
//引入文件
import { navigate, navigateBack } from '@/utils/routerSkip.js';
import superweiCombox from '@/components/superweiCombox';
import searchCustom from '@/components/searchCustom';
import calendarCustom from '@/components/calendarCustom';
import openView from '@/components/common/openView';
import storageBin from '@/components/storageBin.vue'
import comboGrid from '@/components/comboGrid.vue'
import { onShow } from '@dcloudio/uni-app';
import { ref, reactive, onMounted, computed, watch, toRaw } from "vue";
import { OPERATION_SEARCH, OPERATION_REASCT, OPERATION_LOOK, OPERATION_CHOOSE } from '@/constant/index.js'
import { onBackPress } from '@dcloudio/uni-app';
import { basPdaOperationLogFn } from '@/utils/index.js';
import pdaScan from '@/hooks/pdaScan.js'
import { useStore } from "vuex";
import { NGGetRestareaStatusChangeRecords } from '@/api/api.js'

//JS国际化引入
import { useI18n } from 'vue-i18n';
//注册组件
components: {
	searchCustom,
		calendarCustom,
		superweiCombox,
		storageBin,
		openView,
		comboGrid
}

const { t } = useI18n();
let store = useStore();
const { scan } = pdaScan();
let calendarCustomRef = ref(null);

// 弹框的属性
let popup = ref(null);

const data = reactive({
	list: [],
	chooseTime: [],
	process: '',
	productionLine: '',
	processId: '',
	productionLineId: '',
	processOption: [
		{ id: 'JC', name: "JC" },
		{ id: 'TH', name: "TH" },
	],
	barCode: '',  // 条码
	scanList: [],// 扫描记录的存储
	requestParam: {
		processCode: "",
	},
	columnLine: {
		column: [{
			label: t('newTranslation.productionLineName'),
			name: "productionLineName",
		}, {
			label: t('newTranslation.productionLineCode'),
			name: "productionLineCode",
		}]
	},
	operationType: '', // 操作日志操作类型
	noticeHooks: true, //暂无相关数据标识
	page: 1,
	rows: 10,
})
onShow(() => {
	search(OPERATION_LOOK)
})
onMounted(() => {
	uni.$on('scancodedate', (data) => {
		console.log('获取到的code：' + data.code)
		getCode(data.code, 'pda')
	})
})

// 时间选择
const dateChoose = () => {
	calendarCustomRef.value.open()
}
const getTime = (times) => {
	data.chooseTime = times
}

// 工序选择
const select = (e) => {
	data.process = e.id
	data.requestParam.processCode = e.id
	console.log(data.requestParam.processCode)
}

// 产线选择
const getProcessCode = (x) => {
	console.log(x)
	data.productionLine = x.productionLineCode
	data.processId = x.processId
	data.productionLineId = x.id
}

data.scanList = computed(() => {
	return store.state.ngDetail
})

// 扫描条码事件
const confirm = () => {
	getCode(data.barCode, 'keydown')
}

// 监听用户使用相机
const iconClick = async (type) => {
	if (type === 'suffix') {
		let code = await scan();
		getCode(code, 'scan')
	}
}

const getCode = (code, type) => {
	data.barCode = code
}

// 表格数据
const list = async () => {
	if (!data.chooseTime.length) {
		let time = await store.dispatch('getSystemTimeRequest') || ''
		data.chooseTime = [time]
	}
	NGGetRestareaStatusChangeRecords({
		StartDate: data.chooseTime[0],
		EndDate: data.chooseTime[1],
		LineCode: data.productionLine,
		Barcode: data.barCode
	}).then(res => {
		try {
			let inputParameter = JSON.stringify(parmes)
			let returnParameter = JSON.stringify(res)
			let operationPicture = 'NG明细'
			let callInterface = res.rquestUrl
			let opertionParmes = {
				inputParameter,
				returnParameter,
				operationPicture,
				callInterface,
				responseCode: res.status,//返回状态
				errorMessage: res.message,//错误信息
				isPass: res.status == 200 ? 'Y' : 'N',//是否成功 Y N
				operationType: data.operationType
			}
			basPdaOperationLogFn(opertionParmes)
		} catch (error) {
		}
		if (res.status == 200) {
			data.noticeHooks = false
			data.list = res.data.LstData
			if (res.data.LstData.length == 0) {
				data.noticeHooks = true
			}
		} else {
			data.noticeHooks = true
		}
	})
}

// 查询
const search = () => {
	if(data.barCode==''&&data.productionLine==''){
		uni.showToast({
			title: t('locationBarcodeInfo.enterCriteria'),
			icon: 'none'
		})
		return
	}
	data.operationType = OPERATION_SEARCH
	list()
}


const reset = async (type) => {
	data.productionLine = ''
	data.barCode = ''
	data.operationType = type
	let time = await store.dispatch('getSystemTimeRequest') || ''
	data.chooseTime = [time]
	list()
}

//导航栏左侧返回
const clickLeftBack = () => {
	navBackCheck()
}
const navBackCheck = () => {
	if (!data.scanList.length) {
		uni.navigateBack({
			delta: 1
		});
		return true
	}
	uni.showModal({
		title: t('smashRemoval.warmPrompt'),
		content: t('materials.unsubmittedDataIn'),
		success: function (res) {
			if (res.confirm) {
				store.commit('clearNGDetail') // 清空条码数据
				uni.navigateBack({
					delta: 1
				});
			} else if (res.cancel) {
				console.log('用户点击取消');
			}
		}
	});
}
</script>


<style lang="scss" scoped>
.barcodeSplitting {
	display: flex;
	flex-direction: column;
	height: calc(100vh - 88rpx);
}

.distributed-head {
	border-bottom-left-radius: 16rpx;
	border-bottom-right-radius: 16rpx;
}

.scroll {
	flex: 1;
	height: 2rpx;
}

.selects {
	width: 540rpx !important;
	border: none;
}

.noticeHooks {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 80rpx;
	font-size: 32rpx;
	color: #999;
}
</style>
